<template>
    <!-- 卡片视图区 -->
    <el-card class="box-card">
        <template #header>
            <!-- 搜索与添加区域 -->
            <el-row :gutter="20">
                <el-col :span="16">
                    <span class="ml-3 w-35 text-gray-600 inline-flex items-center">现在的Unix时间戳(Unix timestamp)是：</span>
                    <el-input v-model="nowUnixTimestamp" style="width: 150px"></el-input>
                </el-col>
                <el-col :span="8">
                    <el-radio-group>
                        <el-radio-button label="start" @click="nowUnixTimestampFlag = true">开始</el-radio-button>
                        <el-radio-button label="stop" @click="nowUnixTimestampFlag = false">停止</el-radio-button>
                        <el-radio-button label="refresh" @click="getNowTimestamp()">刷新</el-radio-button>
                    </el-radio-group>
                </el-col>
            </el-row>
        </template>

        <div id="container-main">
            <div class="margin-top-16">
                Unix时间戳 (Unix timestamp) &nbsp; 
                <el-input v-model="timestamp" placeholder="请输入秒/毫秒时间戳" style="width: 250px">
                    <template #append>
                        <el-button @click="toDateString" type="primary"> 转换 </el-button>
                    </template>
                </el-input>
                &nbsp;
                <el-input v-model="timestampResult" style="width: 200px;" />
            </div>
            <div class="margin-top-16">
                时间 (yyyy-MM-dd HH:mm:ss) 
                <el-input v-model="dateTime" placeholder="yyyy-MM-dd HH:mm:ss" style="width: 250px">
                    <template #append>
                        <el-button @click="toTimestamp" type="primary"> 转换 </el-button>
                    </template>
                </el-input>
                &nbsp;
                <el-input v-model="dateTimeResult" style="width: 150px;" />
                &nbsp;
                <el-switch v-model="secondTag" @change="toTimestamp" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #409EFF" inline-prompt active-text="秒" inactive-text="毫秒" />
            </div>
        </div>


    </el-card>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { ElNotification } from 'element-plus';
import { timestampToDateTime, dateTimeToTimestamp } from '../utils/misc';

// ----数据定义区域 START----
let nowUnixTimestamp = ref(0);
let nowUnixTimestampFlag = ref(true);

let timestamp = ref('');
let timestampResult = ref('');

let dateTime = ref('');
let dateTimeResult = ref('');

let secondTag = ref(false);

// ----数据定义区域 END----

// ----方法定义区域 START----
const getNowTimestamp = () => {
    nowUnixTimestamp.value = Date.parse(new Date().toString()) / 1000;
}

const toDateString = () => {
    if(timestamp.value == ''){
        ElNotification.error({ title: '请输入时间戳' });
        return
    }
    if(timestamp.value.length != 10 && timestamp.value.length != 13){
        ElNotification.error({ title: '请输入秒/毫秒时间戳' });
        return
    }
    timestampResult.value = timestampToDateTime(Number(timestamp.value));
}


const toTimestamp = () => {
    if(dateTime.value == ''){
        ElNotification.error({ title: '请输入时间' });
        return
    }
    dateTimeResult.value = dateTimeToTimestamp(dateTime.value, secondTag.value).toString();
}



// ----方法定义区域 END----

setInterval(() => {
    if (nowUnixTimestampFlag.value == true) {
        getNowTimestamp();
    }
})


</script>

<style scoped>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#container-main {
    height: 500px;
}

.margin-top-16 {
    margin-top: 16px;
}
</style>